<template>
  <div class="TravelMap">
    <div id="main"></div>
  </div>
</template>
<script setup>
</script>
<script>
import geoJson from "../../assets/data.json";
import { travel } from "../../api/api";
import map from "../../utils/map";
import linesOption from "../../utils/lines";
import pointsOption from "../../utils/points";
import echarts from "echarts";
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    const drawMap = function (linesOption, pointsOption, points, linesData) {
      let myChart = echarts.init(document.getElementById("main"));

      echarts.registerMap("china", geoJson); //注册可用地图，必须包括geo组件或者map图表类型的时候才能使用
      pointsOption.data = points; //点数据
      linesOption.data = linesData; //线数据
      map.series[1] = pointsOption; //点图配置
      map.series[2] = linesOption; //线图配置
      let option = map;
      myChart.setOption(option);
    };
    onMounted(() => {
      travel().then((res) => {
        if (res.data.status == 200) {
          let { points, linesData } = res.data.data;
          drawMap(linesOption, pointsOption, points, linesData);
        }
      });
    });
  },
};
</script>

<style lang="less" scoped>
.TravelMap {
  width: 100%;
  #main {
    width: 89%;
    height: 600px;
  }
}
</style>